<gm:page title="Real Estate Mashup" authenticate="true">

  <gm:data id="favs" data="${app}/favorites"/>

  <gm:tabs target="tabs"/>    

  <gm:container id="tabs"> 
    <gm:section id="searchTab" title="Find"> 

      <table width="100%">
        <tr>
          <td width="500">
          <table>
            <tr>
              <td>Location</td><td>Type</td>
            </tr>
            <tr>
              <td>
                <input id="loc" type="text"/>
              </td>
              <td>

                <gm:search id="search" data="${base}" hint="Enter search term">
                  <gm:param name="item type" value="housing"/>
                  <gm:param name="location" value=""/>
                  <gm:handleEvent event="submit" execute="google.mashups.getObjectById('search').setParam('location', document.getElementById('loc').value)"/>
                </gm:search>
                
              </td>
            </tr>
          </table>
      
          <gm:list id="myList" data="${search}" template="myTemplate" height="400px">
            <gm:handleEvent src="myMap"/>
          </gm:list>
                    
        </td>
        <td>
               
          <gm:map id="myMap" data="${search}" control="large" maptypes="true" latref="g:location/g:latitude" lngref="g:location/g:longitude" height="436px" infotemplate="infoTemplate">
            <gm:handleEvent src="myList"/>
          </gm:map>          

        </td>
      </tr>
    </table>    
  </gm:section>
          

  <gm:section id="favTab" title="Favorites">

    <table width="100%">
      <tr>
        <td width="500">
          <gm:list id="favList" data="${favs}" height="436px" template="favTemplate">


            <gm:handleEvent src="favMap"/>
          </gm:list>
        </td>
        <td>
          <gm:map id="favMap" data="${favs}"  control="large" maptypes="true" latref="g:location/g:latitude" lngref="g:location/g:longitude" height="436px" infotemplate="infoTemplate">
            <gm:handleEvent src="favList"/>
          </gm:map>       
        </td>
      </tr>
    </table>  
  </gm:section>
  </gm:container>

  <gm:template id="myTemplate">
    <table style="width: 100%">
      <tr repeat="true">
        <td>
          <gm:text ref="atom:title"/>
          <br/>
          <a href="javascript:void(0);" onclick="addToFavs(this)">Add to favorites</a>
        </td>
        <td align="right">
          <gm:image ref="g:image_link" width="80" height="60" mode="fill"/>
        </td>
      </tr>
    </table>
  </gm:template>

  
  <gm:template id="favTemplate">
    <table style="width: 100%">
      <tr repeat="true">
        <td>
          <gm:text ref="atom:title"/>

        </td>
        <td align="right">
          <gm:editButtons/>
        </td>
      </tr>

    </table>
  </gm:template>  
  
  <gm:template id="infoTemplate">

    <gm:text ref="atom:title"/>
    <gm:image ref="g:image_link" width="200" height="150"/>

    Price: <gm:text ref="g:price"/>
    <gm:textarea ref="gmd:notes"/>

    <gm:editButtons text="true"/>
  </gm:template>

  <style>
    td { vertical-align: top; }

  </style>
  
  <script>
    function addToFavs(el) {

      var entry = google.mashups.getEntryForElement(el);
      if (entry) {
        google.mashups.getObjectById("favs").addEntry(GPath.cloneEntry(entry));
        google.mashups.getObjectById("tabs").showSection("favTab");

      }
    }
  </script>

</gm:page>

